import React from 'react';
import { Select, Button, Card, Input, Space, Form, Cascader, Upload, message } from 'antd'; // 引入 Modal 和 Input 组件
import type { CascaderProps, UploadProps } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import './certification4Add.css';

const { Option } = Select;

interface Option {
  value: string;
  label: string;
  children?: Option[];
}

// 联级选择
const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

const onChange: CascaderProps<Option>['onChange'] = value => {
  console.log(value);
};
// 文件上传
const props: UploadProps = {
  name: 'file',
  action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
const Index: React.FC = () => {
  const [form] = Form.useForm();
  // 确定
  const onFinish = (values: any) => {
    console.log(values);
  };
  // 取消
  const onReset = () => {
    form.resetFields();
  };
  return (
    <div style={{ height: '100%' }}>
      <div
        style={{
          backgroundColor: 'white',
          padding: '20px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
        }}
      >
        添加公司
      </div>
      <Card title="公司基本信息" className="companyAdd_card">
        <Form form={form} name="control-hooks" onFinish={onFinish}>
          <Form.Item name="公司名称" label="公司名称" style={{ width: '30%' }} rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item
            name="统一社会信用代码"
            label="统一社会信用代码"
            style={{ width: '30%' }}
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="联系电话" label="联系电话" style={{ width: '30%' }} rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="法定代表人" label="法定代表人" style={{ width: '30%' }} rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="传真" label="传真" style={{ width: '30%' }} rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="电子邮箱" label="电子邮箱" style={{ width: '30%' }} rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="法人证书号" label="法人证书号" style={{ width: '30%' }} rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="成立时间" label="成立时间" style={{ width: '30%' }} rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="邮政编码" label="邮政编码" style={{ width: '30%' }} rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="归属地" label="归属地" style={{ width: '70%' }} rules={[{ required: true }]}>
            <Cascader options={options} onChange={onChange} placeholder="Please select" />
          </Form.Item>
          <Form.Item name="公司详细地址" label="公司详细地址" style={{ width: '100%' }} rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="上传附件" label="上传附件" rules={[{ required: true }]}>
            <Upload {...props}>
              <Button icon={<UploadOutlined />}>Upload</Button>
            </Upload>
          </Form.Item>
          <Form.Item className="addBtn">
            <Space size="large" style={{ margin: '0 auto' }}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
              <Button htmlType="button" onClick={onReset}>
                返回
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Index;
